<template>
	<view class="flex-center smart-column page">
		<view class="swiper card">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item class="flex-center">
					<image src="/static/city1.png" mode=""></image>
				</swiper-item>
				<swiper-item class="flex-center">
					<image src="/static/city2.jpg" mode=""></image>
				</swiper-item>
				<swiper-item class="flex-center">
					<image src="/static/city3.jpg" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="card">
			<view class="card-item title">
				<text>泉州介绍</text>
			</view>
			<view class="card-item title2">
				<text>海上丝绸之路起点：泉州</text>
			</view>
			<view class="card-item">
				<rich-text :nodes="infoNodes"></rich-text>
			</view>
		</view>
		<view class="card">
			<view class="title">
				<text>探索进度</text>
			</view>
			<view class="title2">
				<text>当前进度：{{currentPercent}}%</text>
			</view>
			<progress :percent="currentPercent" show-info stroke-width="3px" active="true" />
		</view>
		<view class="card">
			<view class="title">
				选择城市
			</view>
			<view class="">
				<view class="title2">
					当前选择：{{ selectedCityText }}
				</view>
				<view class="picker">
					<picker mode="multiSelector" :range="cityArr" :value="cityIndex" @change="selectChange"
						@columnchange="selectColumnChange">
						<button class="button">选择省市区</button>
					</picker>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="title">
				泉州宣传
			</view>
			<view class="flex-center" style="margin-top: 10px;">
				<video src="/static/city-video.mp4" class="video"></video>
			</view>
			<view class="" style="width: 100%;">
				<view class="card" style="width:90%; background-color: whitesmoke; margin-left: 2.5%;">
					<view class="title2">
						泉州背景音乐
					</view>
					<!-- <audio src="/static/city-music.mp3"></audio> -->

				</view>
			</view>
		</view>
		<view class="card">
			<view class="title">
				偏好设置
			</view>
			<view class="transport">
				<view class="radio-list">
					<radio-group @change="onTransportChange">
						<label class="radio-item" v-for="item in transportOptions" :key="item.value">
							<radio :value="item.value" :checked="transportType === item.value" />
							<text class="radio-label">{{ item.name }}</text>
						</label>
					</radio-group>
				</view>
				<view class="result">
					<text>出行方式：{{ currentTransportName }}</text>
				</view>
				<view class="bottom">

				</view>
			</view>
			<view class="recommend">
				<view class="flex-jc-bet">
					<view class="title2">
						显示推荐景点：
					</view>
					<switch checked="true" @change="" />
				</view>
				<view class="bottom">

				</view>
			</view>
			<view class="explor">
				<view class="flex-jc-bet">
					<view class="title2">
						探索半径：{{currentCircle}}km
					</view>
					<view style="width: 60%;">
						<slider :value="currentCircle" @change="" step="5" />
					</view>
				</view>
				<view class="bottom">

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentPercent: 60,
				cityArr: [
					['福建省', '广东省'], // 省
					['泉州市', '厦门市', '福州市'], // 市（默认显示福建的）
					['鲤城区', '丰泽区', '洛江区'] // 区（默认显示泉州的）
				],
				cityIndex: [0, 0, 0], // 当前选中的索引
				selectedCityText: '未选择', // 显示已选文本
				infoNodes: [{
					name: 'div',
					attrs: {
						class: 'info',

					},
					children: [{
							type: 'text',
							text: '泉州市，简称“鲤”，别名刺桐城、温陵，福建省辖地级市，省三大中心城市之一。地处福建省东南部沿海，北承福州、莆田，南接厦门，东望台湾，西毗漳州、龙岩、三明，占地面积11295.57平方千米。'
						},
						{
							type: 'text',
							text: '泉州市地势西北高东南低，依山面海，以山地、丘陵为主。属亚热带海洋性季风气候，光热充足，雨量充沛，温暖湿润。截至2024年末，泉州市辖4个区、5个县，代管3个县级市。市政府位于泉州市东海行政中心2号楼。截至2024年末，泉州市常住人口891.4万人。'
						},
						{
							type: 'text',
							text: '方言以'
						},
						{
							type: 'text',
							text: '闽南话',
							style: 'font-weight: bold;color: #1890ff;'
						},
						{
							type: 'text',
							text: '为主，通用语言为普通话。'
						}
					]
				}],
				transportType: 'bus', // 默认选择公交
				transportOptions: [{
						value: 'bus',
						name: '公交'
					},
					{
						value: 'car',
						name: '自驾'
					},
					{
						value: 'walk',
						name: '步行'
					}
				],
				currentCircle: 12,
			}
		},
		computed: {
			currentTransportName() {
				const option = this.transportOptions.find(item => item.value === this.transportType)
				return option ? option.name : '未选择'
			}
		},
		methods: {
			// 最终选择确认
			selectChange(e) {
				this.cityIndex = e.detail.value
				this.updateSelectedText()
			},

			// 列变化时触发
			selectColumnChange(e) {
				const {
					column,
					value
				} = e.detail

				// 更新当前列索引
				this.cityIndex[column] = value

				// 省份变化时更新城市列表
				if (column === 0) {
					this.updateCities(value)
					this.cityIndex[1] = 0 // 重置城市选中项
					this.cityIndex[2] = 0 // 重置区域选中项
				}

				// 城市变化时更新区域列表
				if (column === 1) {
					this.updateDistricts(this.cityIndex[0], value)
					this.cityIndex[2] = 0 // 重置区域选中项
				}
			},

			// 更新城市列表
			updateCities(provinceIndex) {
				const cities = [
					['泉州市', '厦门市', '福州市'], // 福建的城市
					['广州市', '深圳市', '珠海市'] // 广东的城市
				]
				this.$set(this.cityArr, 1, cities[provinceIndex])
				this.$set(this.cityArr, 2, this.getDistricts(provinceIndex, 0))
			},

			// 更新区域列表
			updateDistricts(provinceIndex, cityIndex) {
				this.$set(this.cityArr, 2, this.getDistricts(provinceIndex, cityIndex))
			},

			// 获取区域数据（建议抽离为独立数据源）
			getDistricts(provinceIndex, cityIndex) {
				const districts = [
					[ // 福建省
						['鲤城区', '丰泽区', '洛江区'], // 泉州市
						['思明区', '湖里区', '集美区'], // 厦门市
						['鼓楼区', '台江区', '仓山区'] // 福州市
					],
					[ // 广东省
						['天河区', '越秀区', '白云区'], // 广州市
						['福田区', '罗湖区', '南山区'], // 深圳市
						['香洲区', '金湾区', '斗门区'] // 珠海市
					]
				]
				return districts[provinceIndex][cityIndex]
			},

			// 更新显示文本
			updateSelectedText() {
				const [p, c, d] = this.cityIndex
				this.selectedCityText = `${this.cityArr[0][p]} ${this.cityArr[1][c]} ${this.cityArr[2][d]}`
			},

			onTransportChange(e) {
				this.transportType = e.detail.value
				console.log('选择的出行方式:', this.transportType)
			}
		}
	}
</script>

<style>
	.page {
		background-color: whitesmoke;
	}

	.card {
		width: 90%;
		background-color: white;
		border-radius: 5px;
		padding: 8px;
		margin: 10px 0 10px 0px;
	}

	.card-item {
		margin-bottom: 8px;
	}

	.title {
		font-size: 20px;
		font-weight: 600;
	}

	.title2 {
		font-size: 14px;
		font-weight: 400;
	}

	.info {
		font-size: 12px;
		color: #8d8d8d;
	}

	.button {
		width: 90%;
		font-size: 16px;
		margin: 10px;
	}

	.video {
		width: 95%;
		border-radius: 5px;
	}


	.radio-item {
		display: flex;
		align-items: center;
		margin: 20rpx 0;
		padding: 20rpx;
		background: #f8f8f8;
		border-radius: 10rpx;
	}

	.radio-label {
		margin-left: 20rpx;
		font-size: 32rpx;
	}

	.result {
		margin-top: 40rpx;
		padding: 20rpx;
		background: #e8f4ff;
		border-radius: 10rpx;
	}

	.f-b {
		color: cornflowerblue;
	}

	.bottom {
		margin: 10px 0;
		border-bottom: 1px solid lightgray;
	}
</style>